@charset "UTF-8";

.base{box-sizing: border-box;}

.circleDef{composes: base;display: inline-block;height: 21px;width: 21px;border-radius: 50%;border: 1px solid #cfd8dc;vertical-align: middle;position: relative;background-color: #fff;}
.circleDef:hover{border-color: #1abcb0;}
.circleActive{background-color: #1abcb0;border-color: #1abcb0;}
.hidden{display: none;}
.circleSelectDef{display: inline-block;width: 9px;height: 9px;background-color: #fff;border-radius: 50%;position: absolute;top: 50%;left: 50%;margin-top: -4.5px;margin-left: -4.5px;}

.squareDef{composes: circleDef;border-radius: 3px;}
.squareDef:hover{border-color: #1abcb0;}
.squareSelectDef{width: 7px;height: 4px;border: 1px solid #fff;border-color: transparent transparent #fff #fff;transform: rotate(-45deg);position: absolute;top: 50%;left: 50%;margin-top: -5px;margin-left: -4.5px;}
.disabled:hover,
.disabled{cursor: not-allowed;border-color: #cdd7dd;background-color: #cdd7dd;}
